<template>
  <tui-list-cell unlined padding="22rpx 28rpx" :arrow="arrow" :border-radius="borderRadius" :hover="!unHover" @click="onclick">
    <view class="flex-row cell-item relative align-center" :style="{alignItems}">
      <view class="label flex-row align-center" :style="{padding:labelPadding}">
        <text v-if="must" class="text-30 color-error margin-right-6">*</text>
        <text class="text-30 color-t1">{{ label }}</text>
      </view>

      <view class="value flex-item flex-row align-center">
        <slot v-if="hasSlot" />
        <input v-else class="text-30 color-t1 flex-item value" :value="value" :type="type" :maxlength="maxlength" :placeholder="placeholder" placeholder-class="color-t3" @input="input">
        <text v-if="suffix" class="text-30 color-t3">{{ suffix }}</text>
      </view>
      <view v-if="!unlined" class="line margin-left-20" :style="{right:arrow?'-54rpx':''}" />
    </view>
  </tui-list-cell>
</template>

<script>
export default {
  name: 'AddOrderCell',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    unlined: {
      type: Boolean,
      default: false
    },
    arrow: {
      type: Boolean,
      default: false
    },
    hasSlot: {
      type: Boolean,
      default: false
    },
    must: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    maxlength: {
      type: [String, Number],
      default: -1
    },
    placeholder: {
      type: String,
      default: ''
    },
    alignItems: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: ''
    },
    labelPadding: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    unHover: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    input(e) {
      this.$emit('input', e.detail.value)
    },
    onclick() {
      this.$emit('click',)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(right,6);

.label{
  width:186rpx;
  min-height:66rpx;
}

.value{
  min-height:66rpx;
}

.line{
  @include position(absolute,$bottom:-22rpx,$right:0,$left:173rpx);
  border-bottom:2rpx solid $color-border;
}
</style>
